<template>
    <div>
        <div class="top-div">
            <el-row>
                <el-col :span="2">
                    <el-button v-if="$store.state.authList.indexOf('index:manager:del')!=-1" :disabled="selectValue.length==0" icon="el-icon-delete" type="danger" @click="handledelete(selectValue.toString())">删 除</el-button>
                </el-col>
                <el-col :span="2" :push="20">
                    <el-button v-if="$store.state.authList.indexOf('index:manager:save')!=-1" type="primary" @click="handleAdd" icon="el-icon-plus">添 加</el-button>
                </el-col>
            </el-row>
        </div>
        <div>
            <el-table
                    :data="tableData" border  @selection-change="handleSelectionChange"
                    style="width: 100%;height: calc( 100vh - 205px )">
                <el-table-column
                        type="selection"
                        :selectable="checkSelectable"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="userName"
                        label="帐号"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="realName"
                        label="姓名">
                </el-table-column>
                <el-table-column
                        prop="loginDate"
                        label="最近登录时间">
                </el-table-column>

                <el-table-column
                        align="center"
                        label="操作" width="180">
                    <template slot-scope="scope" v-if="scope.row.id!='1'">
                        <el-button v-if="$store.state.authList.indexOf('index:manager:del')!=-1"  @click="handledelete(scope.row.id)" style="color: #ff0000;"  type="text" size="small">删除</el-button>
                        <el-button v-if="$store.state.authList.indexOf('index:manager:update')!=-1"  @click="handleEdite(scope.row)"  type="text" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <manger-fom  ref="mform"  @query="query()" :visible.sync="dialogVisible" ></manger-fom>
    </div>
</template>

<script>
    import util from "../../util/util";
    import managerApi from "../../api/managerApi";
    import MangerFom from "./mangerFom";
    export default {
        name: "mangerTable",
        components: {MangerFom},
        data() {
            return {
                tableData: [],
                selectValue:[],
                dialogVisible:false,
                formdata:{}
            }
        },
        methods:{
            checkSelectable(row){
                return row.id!='1'
            },
            handleEdite(item){
                this.$refs.mform.open(item.id)
            },
            handleAdd(){
                this.$refs.mform.open("")
            },
            handleSelectionChange(val) {
                this.selectValue = []
                val.forEach(item => {
                    this.selectValue.push(item.id)
                })
            },
            query(){
                managerApi.list().then(res=>{
                    this.tableData=res.data
                })
            },
            async handledelete(id){
                let flag=await util.deleteConfirm()
                if(flag){
                    managerApi.delete(id).then(res=>{
                        this.query()
                    })
                }
            },
        },
        mounted() {
            this.query()
        }
    }
</script>

<style scoped>

</style>